<style lang="less">
	page {
		background: #F5F5F5;
	}

	.container {
		padding: 30upx 30upx 0;
		box-sizing: border-box;
		margin-bottom: 50upx;
	}
	.head{
		background: #FFFFFF;
		border-radius: 24upx;
		box-sizing: border-box;
		margin-bottom: 26upx;
		.head_title{
			padding: 36upx 32upx;
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			line-height: 30upx;
			border-bottom: 1upx solid #EDEDED;
		}
		.head_down{
			padding: 36upx 20upx;
			display: flex;
			justify-content: space-between;
			.head_list{
				width: 32%;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: auto;
				
				.head_list_txt{
					font-size: 26upx;
					font-weight: 500;
					color: #333333;
					line-height: 26upx;
				}
				.head_list_nums{
					margin-top: 30upx;
					font-size: 50upx;
					font-family: "DINCond";
					font-weight: 400;
					color: #DBC291;
					height: 50upx;
					line-height: 50upx;
				}
			}
		}
	}
	.foot{
		width: 100%;
		padding: 40upx 30upx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 24rpx;
		.foot_title{
			margin-bottom: 30upx;
			font-size: 30upx;
			font-weight: bold;
			color: #333333;
			line-height: 30upx;
		}
		.charts-box {
		  width: 100%;
		  height: 600upx;
		}
	}
</style>


<template>

	<view class="container">
		<view class="head">
			<view class="head_title">成交金额</view>
			<view class="head_down">
				<view class="head_list">
					<view class="head_list_txt">今日</view>
					<view class="head_list_nums">{{titleList[0]}}</view>
				</view>
				<view class="head_list">
					<view class="head_list_txt">昨日</view>
					<view class="head_list_nums">{{titleList[1]}}</view>
				</view>
				<view class="head_list">
					<view class="head_list_txt">本月</view>
					<view class="head_list_nums">{{titleList[2]}}</view>
				</view>
			</view>
		</view>
		<view class="head">
			<view class="head_title">订单数</view>
			<view class="head_down">
				<view class="head_list">
					<view class="head_list_txt">今日</view>
					<view class="head_list_nums">{{titleList[3]}}</view>
				</view>
				<view class="head_list">
					<view class="head_list_txt">昨日</view>
					<view class="head_list_nums">{{titleList[4]}}</view>
				</view>
				<view class="head_list">
					<view class="head_list_txt">本月</view>
					<view class="head_list_nums">{{titleList[5]}}</view>
				</view>
			</view>
		</view>
		<view class="foot">
			<view class="foot_title">本月成交金额&订单趋势</view>
			<view class="charts-box">
			  <qiun-data-charts type="mix" :chartData="mixOne" :ontouch="true"/>
			</view>
		</view>
	</view>

</template>

<script>
	import api from '@/common/api';
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js';
	export default {

		components: {},

		data() {

			return {
				titleList:[], //上方标题数据
				mixOne:{},  //混合图形数据
				token:''
			}
		},
		onLoad(){
			this.token=uni.getStorageSync('token')
			// this.token = 'eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiLnm7TljYfliIbkvaMyIiwiYXVkaWVuY2UiOiIzNDNiMWM0YTNlYTcyMWIyZDY0MGZjODcwMGRiMGYzNiIsInVzZXJfaWQiOjM5OTY1OSwiY3JlYXRlZCI6MTYxOTY4MjMyODk1MSwiZXhwIjoxNjIyMjc0MzI4LCJ1c2VyX2dyb3VwX2lkIjpudWxsfQ.bzbng_TAgVDoJThbwh7Juq2xUS2JZEsBkszvICvNuimMZJropdclxUdK-2zt33eviZPTlc4Ib8KZ9iUx3boeBA'
			this.tradeNum()
		},
		methods: {
			async tradeNum(){
				const [err, res] = await api.tradeNum({
					header:{
						'token': this.token
					}
				 });
				 if(res.data.code == 0){
					this.titleList = res.data.data
					this.tradeTrend()
				}
			},
			async tradeTrend(){
				const [err, res] = await api.tradeTrend({
					header:{
						'token': this.token
					}
				 });
				 if(res.data.code == 0){
					let result = res.data.data
					let LineA={categories:[],series:[]};
					let payAmount = result.payAmount.map(v => parseFloat(v))
					let settleAmount = result.settleAmount.map(v => parseFloat(v))
					let orderNum = result.orderNum.map(v => parseFloat(v))
					// console.log(payAmount,settleAmount,orderNum)
					LineA.categories=result.days
					LineA.series=[{
						 name: '-成交金额-',
						 data: payAmount,
						type:'column',
						legendShape:"square"
					 },{
					 	 name: '-结算金额-',
					 	 data: settleAmount,
					 	type:'column',
						legendShape:"square"
					 },{
					 	 name: '-订单数-',
						 index:1,
					 	 data: orderNum,
					 	 type:'line',
					 	 style:'curve',
					 	 addPoint:true,
						 legendShape:"circle"
					 }
					]
					this.mixOne = LineA
				 }
			},
		},

	}
</script>
